<template>
  <!-- html 结构 -->
  <div class="preson">
    <!-- <h2 id="title">Person.vue中的标签内容</h2> -->
    <h2 ref="title">Person.vue中的标签内容</h2>
    <button @click="showTag">点我输出标签内容</button>
  </div>
</template>

<!-- 在vue3中监事一个reactive定义的响应式常量应该是这么写的 -->
<script lang="ts" name="Person" setup>
// defineExpose 是宏函数，可以不导入
// import { ref, defineExpose } from "vue";
import { ref } from "vue";
let title = ref();

// 子组件中的其他属性，如需被父组件使用需要主动暴露给父组件
let a = ref(0);
let b = ref(1);
let c = ref(2);
function showTag() {
  // 标签中使用id属性的话会出现唯一性问题，如果其他位置有同样的id标签且出现位置早于当前vue的位置就会显示其他vue文件中id标签
  // console.log(document.getElementById("title"));
  console.log("标签中的内容：", title.value);
}

/**
 * 1、导入defineExpose：import { defineExpose } from "vue";
 * 2、使用defineExpose函数
 */
defineExpose({ a, b });
</script>

<!-- scoped局部样式: -->
<style scoped>
.preson {
  background-color: rgb(120, 145, 46);
  box-shadow: 0 0 10px;
  border-radius: 10px;
}
/* 样式 */
button {
  background-color: aqua;
  margin: 5px;
}
</style>
